<!--demo4-1-->
<!--<template>
  <div>
   以开放标签形式使用全局组件
    <count-com></count-com>
    以自闭合标签形式使用全局组件
    <count-com/>
  </div>
</template>
<script>
</script>
<style scoped>
</style>-->

<!--demo4-2-->
<!--template>
  <div>
    <NumberCom/>
    <NumberCom/>
  </div>
</template>
<script>
//导入局部组件对象
  import NumberCom from './components/NumberCom.vue'
  export default{//导出当前的单文件组件，供外部文件使用
    //注册局部组件
    components:{
      NumberCom
    },
  };
</script>
<style scoped>

</style>-->

<!--demo4-3
<template>
  <div>
    <HelloCom name = "Jim"></HelloCom>
    <HelloCom name = "Lily"></HelloCom>
    <HelloCom name = "Bob"></HelloCom>
  </div>
</template>

<script>
import HelloCom from "./components/HelloCom.vue";
export default {
  components: {
    HelloCom,
  },
};
</script>

<style scoped>

</style>
-->

<!--demo4-4
<template>
  <div>
    <input type="radio" v-model="activeComponent" value="ActiveCom1"/>ActiveCom1
    <input type="radio" v-model="activeComponent" value="ActiveCom2"/>ActiveCom2
    <component :is="activeComponent"></component>
  </div>
</template>

<script>
import ActiveCom1 from "./components/ActiveCom1.vue";
import ActiveCom2 from "./components/ActiveCom2.vue";
export default {
  data(){
    return {
      activeComponent: "ActiveCom2",
    };
  },
  components: {
    ActiveCom1,
    ActiveCom2,
  }
};
</script>

<style scoped>
</style>
-->

<!--demo4-5
<template>
  <div>
    <Suspense>
      <template v-slot:default>
        <AsyncCom></AsyncCom>
      </template>
      <template v-slot:fallback>
        <h2>LOADINC.......</h2>
      </template>
    </Suspense>
  </div>
</template>
<script>
import {defineAsyncComponent} from'vue'
const AsyncCom=defineAsyncComponent(
  ()=>import("./components/HelloCom2.vue")
)
export default{
  components:{
    AsyncCom
  }
}
</script>

<style scoped>

</style>
-->


<!--demo4-6
<template>
  <div>
    <button @click="currentTab = 'Tab1'">音乐</button>
    <button @click="currentTab = 'Tab2'">视频</button>
    <button @click="currentTab = 'Tab3'">新闻</button>
    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>
<script>
import Tab1 from"./components/TabCom1.vue";
import Tab2 from"./components/TabCom2.vue";
import Tab3 from"./components/TabCom3.vue";
export default {
  data(){
    return {
      currentTab:"Tab1",
    };
  },
  components: {
    Tab1,
    Tab2,
    Tab3,
  },
};
</script>
<style scoped>
</style>
-->

<!--demo4-7
<template>
  <div>
    <ChildCom msg="Hello.I am dad!"></ChildCom>
  </div>
</template>

<script>
import ChildCom from "./components/ChildCom.vue"
export default {
  components:{
    ChildCom
  }
};
</script>
<style scoped>
</style>
-->


<!--demo4-8
<template>
  <div>
    <ChildCom1 :name="name" :age="age"></ChildCom1>
  </div>
</template>
<script>
import ChildCom1 from "./components/ChildCom1.vue"
export default {
  data(){
    return{
      name:'Jim',
      age:[],
      gender:'',
      hobby:[]
    }
  },
components:{
  ChildCom1
}
};
</script>
<style sccped>
</style>-->

<!--demo4-9
<template>
  <div>
    <mycom1 :parentMsg="msg"></mycom1>
  </div>
</template>
<script>
import mycom1 from "./components/MyCom1.vue"
export default{
  data(){
    return{
      msg:'父组件的msg'
    }
  },
  components:{
    mycom1
  }
};
</script>
<style scoped>
</style>
-->




<template>
  <div>
    <mycom2 :childWidth="width"></mycom2>
  </div>
</template>
<script>
import mycom2 from "./components/MyCom2.vue"
export default {
  data(){
    return{
      width:400
    }
  },
  components:{
    mycom2
  }
};
</script>
<style scoped>
</style>
